<template>
    <el-button type="primary" @click="addClue">录入线索</el-button>
    <el-button type="success" @click="importClue">导入线索(Excel)</el-button>
    <el-button type="danger" @click="batchDel">批量删除</el-button>

    <el-table :data="cluePageInfo.list" style="width: 100%" @selection-change="selectId">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="65" />
        <el-table-column property="ownerDo.name" label="负责人" width="120" />
        <el-table-column property="activityDo.name" label="所属活动" />
        <el-table-column label="姓名">
            <template #default="scope">
                <a href="javascript:void(0)" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
            </template>
        </el-table-column>
        <el-table-column property="phone" label="手机" width="120" />
        <el-table-column property="weixin" label="微信" width="120" />
        <el-table-column property="intentionStateDo.typeValue" label="意向状态" />
        <el-table-column property="intentionProductDo.name" label="意向产品" />
        <el-table-column property="stateDo.typeValue" label="线索状态" />
        <el-table-column property="sourceDo.typeValue" label="线索来源" />
        <el-table-column property="appellationDo.typeValue" label="称呼" />
        <el-table-column property="loanDo.typeValue" label="是否需要贷款" />
        <el-table-column property="nextContactTime" label="下次联系时间" width="165" />
        <el-table-column label="操作" width="230">
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next, jumper, total" :total="cluePageInfo.total"
        :page-size="cluePageInfo.pageSize" @change="toPage" />

    <!-- 模态窗口 线索导入弹窗 -->
     <el-dialog v-model="clueDialogVisible" title="线索导入" >
        <!-- 文件上传 -->
        
         <el-upload
         ref="uploadRef"
         action="http://localhost:8088/api/importExcel"
         method="post"  
         name="excelFile"
         :headers="header"
         :on-success="uploadSuccess"
         limit="1"
         :auto-upload="false"
         >
            <template #trigger>
                <el-button type="primary">请选择excel文件</el-button>
            </template>

         </el-upload>

         <template #footer>
            <el-button type="primary" @click="importExcel">导入</el-button>
            <el-button type="primary" plain @click="clueDialogVisible = false">取消</el-button>
         </template>
     </el-dialog>
</template>

<script setup>

import { ref, onMounted ,inject} from 'vue'
import { showMessage } from '../util/message'
import { doGet } from '../http/httpRequest'
import { TOKEN_NAME } from "@/util/constant.js"
import { useRouter } from 'vue-router'

//分页数据对象
const cluePageInfo = ref([{}])

onMounted(() => {
    loadClueList(1)
})

//分页查询线索
const loadClueList = async current => {
    const resp = await doGet('/api/clues', {
        current: current,
    })
    if (resp.data.code == 200) {
        cluePageInfo.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }

}

//分页
const toPage = current => {
    loadClueList(current)
}

//控制dialog显示
const clueDialogVisible = ref(false)

//显示dialog
const importClue = () => {
    clueDialogVisible.value = true
}

//设置token
const header = ref({
    Authorization: localStorage.getItem(TOKEN_NAME)
})

//上传组件的ref对象
const uploadRef = ref()

//导入excel文件  提交
const importExcel = () => {
    uploadRef.value.submit()
}

//注入父页面中的函数
let flushPage = inject('flush')

//excel导入成功之后的回调
const uploadSuccess = (response,uploadFile,uploadFiles) => {
    if(response.code == 200){
        showMessage('导入成功','success')
       //局部刷新
       flushPage()
    }else{
        showMessage(response.data.msg,'error')
    }
}

//路由到明细
let router = useRouter()

//路由到明细
const view = id => {
    router.push('/dashboard/clue/' + id)
}
</script>

<style scoped></style>